import React from 'react';
import Link from 'umi/link';
import router from 'umi/router';
import { connect } from 'dva';
import withRouter from 'umi/withRouter';
import { Layout, Menu, Input } from 'antd';
import style from './head.less';

const { Search } = Input;
const { Header } = Layout;

class header extends React.Component {

  constructor(props) {
    super(props);
    this.searchClickHandler = this.searchClickHandler.bind(this);
  }

  async searchClickHandler(value) {
    await this.props.dispatch({
      type: 'global/fetch',
      payload: { value: value }
    });
    let data = this.props.data;
    if (!data) {
      router.push('/404')
    } else if (data.prevHash || data.nextHash) {
      router.push(`/block/${data.hash}`);
    } else {
      router.push(`/transaction/${data.hash}`);
    }
  }

  render() {
    return (
        <Header>
          <div className={style.left} >
            <Link to="/">Annchain.OG</Link>
          </div>
          <div className={style.right}>
            <Menu theme="lignt"
                  mode="horizontal"
                  selectedKeys={[this.props.location.pathname]}
                  className={style.menu}>
              <Menu.Item key="/"><Link to='/'>区块链浏览器</Link></Menu.Item>
              <Menu.Item key="/node"><Link to='/node'>节点浏览</Link></Menu.Item>
            </Menu>
            <div className={style.search}>
              <Search
                placeholder="搜索地址/高度/哈希值"
                onSearch={this.searchClickHandler}
                size="small"
                style={{ width: 250 }}
              />
            </div>
          </div>
        </Header>
    );
  }
}

function mapStateToProps(state) {
  const { data } = state.global;
  return {
    data
  };
}
const locationHeader = withRouter(header);
export default connect(mapStateToProps)(locationHeader);
